<template>
  <el-form ref="form"
           :model="data"
           :rules="rules"
           status-icon
           label-position="left"
           label-width="0px">
    <el-form-item prop="username">
      <el-input v-model.trim="data.username"
                type="text"
                class="user-size"
                auto-complete="off"
                prefix-icon="el-icon-user"
                placeholder="请输入用户名"
                @input="changeUserName"
                @keyup.enter.native="handleSubmit()">
        <span v-if="aliass"
              slot="suffix"
              class="suff">@{{ aliass }}</span>
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input v-model.trim="data.password"
                type="password"
                class="password-size"
                auto-complete="off"
                prefix-icon="el-icon-lock"
                placeholder="请输入密码"
                show-password
                @input="changePassword"
                @keyup.enter.native="handleSubmit()"></el-input>
    </el-form-item>
    <el-checkbox v-show="false"
                 v-model="rememberMe"
                 class="rememberme">记住密码</el-checkbox>
    <el-form-item style="width: 100%">
      <el-button type="primary"
                 style="width: 100%; height: 45px"
                 :loading="loading"
                 @click.native.prevent="handleSubmit()">登 录
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: "PasswordLogin",
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    alias: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      data: {
        username: null,
        password: null
      },
      rememberMe: false,
      // loading: false,
      rules: {
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          }
        ]
      }
    };
  },
  computed: {
    aliass () {
      return this.alias || null
    }
  },
  methods: {
    blankSpaceVaild (val) {
      if (val && val.match(/\s/g, '')) {
        val = val.replace(/\s/g, '');
      }
      return val;
    },
    changeUserName (val) {
      let value = this.blankSpaceVaild(val);
      this.data.username = value;
    },
    changePassword (val) {
      let value = this.blankSpaceVaild(val);
      this.data.password = value;
    },
    handleSubmit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$emit("login", this.data);
        } else {
          // console.log("参数校验失败: ", this.data);
          return false;
        }
      });
    }
  }
};
</script>

<style scoped>
.password-size >>> .el-input__prefix {
  font-size: 21px;
  line-height: 45px;
}
.user-size >>> .el-input__prefix {
  font-size: 21px;
  line-height: 45px;
}
.user-size >>> .el-input__icon .el-icon-user,
.el-input__icon .el-icon-lock {
  line-height: 45px;
}
</style>

<style lang="scss" scoped>
label.el-checkbox.rememberme {
  margin: 0px 0px 15px;
  text-align: left;
}
/deep/ .el-input__inner {
  font-size: 14px;
  height: 45px !important;
}
.suff {
  line-height: 45px;
}
</style>
